<template>
	<div class="c-interaction" :style="[borderRadius,boxShadow]">
		<!-- 自定义的图片类型的 -->
		<div v-if="cm.iscustom">
			<!-- 拨打电话 -->
			<img v-if="cm.props.type=='phone'" :src="cm.props.text" :style="wid_hei">
			<!-- 点击链接 -->
			<div v-else-if="cm.props.type=='link'" @click="redirect(cm.props.url)">
				<img :src="cm.props.text" :style="wid_hei">
			</div>
			<!-- 有惊喜，音乐播放 -->
			<div v-else @click="togglePlay">
				<img :src="cm.props.text" :style="wid_hei">
				<audio ref="music" :src="cm.props.url"></audio>
			</div>
		</div>
		<div v-else>
			<!-- 拨打电话 -->
			<p v-if="cm.props.type=='phone'" :style="center">{{ cm.props.text }}</p>
			<!-- 点击链接 -->
			<div v-else-if="cm.props.type=='link'" @click="redirect(cm.props.url)">
				<p :style="center">{{cm.props.text}}</p>
			</div>
			<!-- 有惊喜，音乐播放 -->
			<div v-else @click="togglePlay">
				<p :style="center">{{cm.props.text}}</p>
				<audio ref="music" :src="cm.props.url"></audio>
			</div>
		</div>
	</div>
</template>

<script>
	// 防抖函数
	import {
		debounce
	} from '../utils.js'

	export default {
		name: 'BaseInteraction',
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {
				isPlay: false,
				// music_url:'http://121.40.29.50/AllPassNMM/upload/syspic/yx/%E6%89%93%E9%9B%B7.mp3',
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},

		computed: {
			cm() {
				return this.$store.getters.getCompConfigByCompid(this.compid)
			},
			borderRadius() {
				return {
					borderRadius: this.cm.css.bd.r + 'px'
				}
			},
			boxShadow() {
				return {
					boxShadow: this.cm.css.bsd.x + 'px' + ' ' + this.cm.css.bsd.y + 'px' + ' ' + this.cm.css.bsd.s + 'px' + ' ' + this
						.cm.css.bsd.p + 'px' + ' ' + this.cm.css.bsd.c
				}
			},
			wid_hei() {
				return {
					width: this.cm.css.base.w + 'px',
					height: this.cm.css.base.h + 'px'
				}
			},
			center() {
				var textAlign="center"
				return {
					lineHeight: this.cm.css.base.h + 'px',
					textAlign:textAlign
				}
			
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			togglePlay() {
				if (this.cm.isProview) {
					const music = this.$refs.music
					if (this.isPlay) {
						this.isPlay = false
						music.pause()
					} else {
						this.isPlay = true
						music.play()
					}
				}
			},
			redirect(id) {
				this.$emit('solid', id)
			},
			change_component: debounce(function(
				params
			) {
				const revoke_state = this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if (revoke_state) {
						this.$store.commit('REVOKE_STATE', false)
					} else {
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300)
		}

	}
</script>

<style>

</style>
